import Vue from 'vue'
import App from './App.vue'
// 引入路由器
import router from '@/router'
// 引入TypeNav三级导航全局组件
import TypeNav from '@/components/TypeNav/index'
// 引入Carousel轮播图全局组件
import Carousel from '@/components/Carousel'
// 引入Pagination分页器全局组件
import Pagination from '@/components/Pagination'
// 引入Vuex的store仓库
import store from './store'
// 引入mockServe---mock模拟数据
import '@/mock/mockServe'
// 引入轮播图插件样式
import 'swiper/css/swiper.css'
// 引入字体图标样式
import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont'
// 把api里所有的接口封装成一个模块，并放在全局总线中
import * as API from '@/api'
// 引入element-ui
import { Button, MessageBox } from 'element-ui'
// 引入element-ui的css样式
import 'element-ui/lib/theme-chalk/index.css'
// 引入懒加载插件vue-lazyload
import VueLazyLoad from 'vue-lazyload'
// 引入plugins中自定义插件
import MyPlugin from './plugins/myPlugins'
// 引入vee-validate表单校验插件
import './plugins/validate'

// 使用懒加载插件
Vue.use(VueLazyLoad, {
  loading: require('@/assets/images/loading.gif'),
  error: require('@/assets/images/error.jpg')
})
// 使用自定义插件
Vue.use(MyPlugin, {
  name: 'nihao'
})

// 按需使用element-ui的组件
Vue.component(MessageBox.name, MessageBox)
Vue.component(Button.name, Button)

// Vue.component接收两个参数，第一个是组件名，第二个是要注册的组件
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(Pagination.name, Pagination)

Vue.config.productionTip = false

const vm = new Vue({
  render: h => h(App),
  // 注册路由
  // 当router注册后，被使用到的路由组件身上都有$router,$route属性
  router,
  // 注册vuex
  // 注册后，组件的实例身上会多一个$store属性
  store,
  // 安装全局事件总线
  beforeCreate () {
    Vue.prototype.$bus = this;
    // 把服务器请求模块封装成一个模块放入Vue原型
    Vue.prototype.$api = API;
  }
}).$mount('#app')

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
